<template>
  <div class="navMenu_box">
    <el-menu
      :default-active="store.activeIndexTab"
      class="el-menu-vertical-demo"
      :collapse="store.collapseIcon"
      background-color="#304156"
      text-color="#bfcbd9"
      unique-opened
    >
      <!-- 菜单动态生成 -->
      <template v-for="(menu, index) in store.navMenu[2].children" :key="index">
        <!-- 判断是否有子菜单===有 -->
        <el-sub-menu
          :index="menu.name"
          v-if="menu.children && menu.children.length > 0"
        >
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{ menu.name }}</span>
          </template>

          <el-menu-item
            :index="item.name"
            v-for="item in menu.children"
            :key="item.name"
            @click="skipView(item.name)"
          >
            <template #title>
              <el-icon><location /></el-icon>
              <span slot="title">{{ item.name }}</span></template
            >
          </el-menu-item>
        </el-sub-menu>
        <!-- 判断是否有子菜单===无 -->
        <el-menu-item :index="menu.name" v-else @click="skipView(menu.name)">
          <template #title>
            <el-icon><location /></el-icon>
            <span slot="title">{{ menu.name }}</span>
          </template>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script setup>
import { Location } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useStore } from '@/store/user'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

const skipView = (e) => {
  router.push({ name: e })
}
</script>

<style lang="less">
.navMenu_box {
  width: 100%;
  height: 100vh;
  background-color: #304156;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px;
  min-height: 400px;
}
</style>
